<div class="dispatch-main-container">
  <div class="center-panel">
    <div class="banner">
      <div class="weather">
        <app-weather-panel></app-weather-panel>
      </div>

      <div class="data">
        <div class="water-panel">
          <div class="title">
            全区用水情况
          </div>
          <div class="data">
            <div class="item">
              <div class="num">65570
              </div>
              <div class="text">计划</div>
            </div>
            <div class="item">
              <div class="num">2.124</div>
              <div class="text">当日</div>
            </div>
            <div class="item">
              <div class="num">2.124</div>
              <div class="text">累计</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="canvas-wrap" #canvasDiv>
      <div class="area-wrap">
        <ul nz-menu nzMode="inline" class="left-menu">
          <li nz-menu-item
              *ngFor="let item of areaData; let idx = index"
              [nzSelected]="idx === 0"
              (click)="areaClick(item)">
            {{item.name}}
          </li>
        </ul>
      </div>

      <div class="map-container">
        <!-- 地图 -->
        <up-unified-map #map [enableCompass]="true" [homeButton]="true"
                        [initViewRange]="viewRange"
                        [hasSidePane]="false"
                        [enableSwitchMapMode]="false"
                        [initDataset]="{ '2d': 'EsriAerial', '3d': 'EsriAerial' }"
                        (mapInitialized)="mapInitialized($event)"
                        (entityClick)="entityClick($event)"
                        (entityHoverChange)="entityHovered($event)">
        </up-unified-map>

        <!-- 点位 -->


      </div>
    </div>

    <div class="legends">
      <button nz-button nzType="default" class="btn-type2" (click)="goPage('zx')">农业用水</button>
      <button nz-button nzType="default" class="btn-type1">工业生活</button>
      <button nz-button nzType="default" class="btn-type2" (click)="goPage('st')">生态用水</button>
    </div>
  </div>

  <div class="right-panel">
    <div class="table-wrap">
      <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
        <nz-form-item>
          <nz-form-label>关键词</nz-form-label>
          <nz-form-control>
            <input formControlName="key" nz-input placeholder="关键词" style="width: 160px;"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item style="margin-right: 0;">
          <nz-form-control>
            <button nz-button nzType="primary" (click)="getTableData()"><i nz-icon nzType="search"></i>搜索</button>
          </nz-form-control>
        </nz-form-item>
      </form>

      <nz-table
        #gyysTable
        nzBordered
        nzSize="small"
        [nzPageSize]="6"
        [nzData]="rightTableData">
        <thead>
        <tr>
          <th nzWidth="300px">单位名称</th>
          <th>当日取水量(m³)</th>
          <th>累计取水量（万m³）</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of gyysTable.data" (click)="rowClick(data)" [ngClass]="{'active': data.mp_nm == selecteRow.mp_nm}">
          <td>{{ data.mp_nm }}</td>
          <td>{{ data.day_w }}</td>
          <td>{{ data.day_w_total }}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>

    <div class="chart-wrap">
      <div class="chart-title">{{chartTitle}}</div>
      <div class="time-picker-wrap">
        时间：
        <nz-range-picker
          [nzAllowClear]="false"
          [(ngModel)]="rangePickerValue"
          (ngModelChange)="rangePickerValueChange($event)"
          style="width: 300px;"
        >
        </nz-range-picker>
      </div>
      <div
        echarts
        [options]="processOpt"
        [merge]="processOptChange"
        style="height: 329px;"
      ></div>
    </div>
  </div>
</div>
